import {
  useState,useEffect
} from 'react';

import {
  Empty
} from 'antd';

//config comps
import InputConfig from './comps/InputConfig';
import SelectConfig from './comps/SelectConfig';
import DatePickerConfig from './comps/DatePicker';
import DateRangeConfig from './comps/DateRange';


type PropsType = {
  itemConfig:any;
  onItemEditData:Function;
}

function EditItemForm(props:PropsType){

  const [config,setConfig] = useState<any>(null);

  useEffect(() => {
    setConfig({...props.itemConfig})
  }, [props.itemConfig]);

  if(!config) return (
    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
  )

  function onChangeCallback(itemConfig:any[]){
    // return console.log(itemConfig);
    props.onItemEditData(itemConfig)
    setConfig(itemConfig);
  }


  return (
    <div className="propertyConfig" style={{height:'600px'}}>

      {
      config.name === 'input' ? <InputConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'select' ? <SelectConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'datePicker' ? <DatePickerConfig config={config} onChangeCallback={onChangeCallback} />
      : config.name === 'dateRange' ? <DateRangeConfig config={config} onChangeCallback={onChangeCallback} />
      : null
      }

    </div>
  )
}

export default EditItemForm;
